@extends('Home.Layout.layout')

@section('con')
		<div class="breadcrumbs">
		<div class="container">
			<div class="breadcrumbs-main">
				<ol class="breadcrumb">
					<li><a href="/">首页</a></li>
					<li class="active">{{$goods[0]->gname}}</li>
				</ol>
			</div>
		</div>
	</div>
	<!--end-breadcrumbs-->
	<!--start-single-->
	<div class="single contact">
		<div class="container">
			<div class="single-main">
				<div class="col-md-9 single-main-left">
				<div class="sngl-top">
					<div class="col-md-5 single-top-left">	
						<div class="flexslider">
							<ul class="slides">
								<li data-thumb="{{$goods[0]->gpic}}">
									<img src="{{$goods[0]->gpic}}" />
								</li>
								<li data-thumb="{{$goods[0]->gpic}}">
									<img src="{{$goods[0]->gpic}}" />
								</li>
								<li data-thumb="{{$goods[0]->gpic}}">
									<img src="{{$goods[0]->gpic}}" />
								</li>
								<li data-thumb="{{$goods[0]->gpic}}">
									<img src="{{$goods[0]->gpic}}" />
								</li>
							</ul>
						</div>
<!-- FlexSlider -->
  <script defer src="{{asset('HomeCss/js/jquery.flexslider.js')}}"></script>

<link rel="stylesheet" href="{{asset('HomeCss/css/flexslider.css')}}" type="text/css" media="screen" />

	<script>
// Can also be used with $(document).ready()

$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide",
    controlNav: "thumbnails"
});
  });
</script>

				</div>	
				<div class="col-md-7 single-top-right">
					<div class="details-left-info simpleCart_shelfItem">
						<h3>{{$goods[0]->gname}}</h3>
						<p class="availability">库存: <span class="color">{{$goods[0]->cnt}}</span></p>
						<div class="price_single">
						
							<span class="reducedfrom">${{$goods[0]->price}}</span>
							<span class="actual item_price">${{$goods[0]->price*0.8}}</span><a class="collect" href="#">收藏宝贝</a>
						</div>
						<h2 class="quick">Quick Overview:</h2>
						<p class="quick_desc"> Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; es</p>
						<ul class="product-colors">
							<h3>颜色 :</h3>
							@foreach($color as $k=>$v)
							<li class="yanse"><a class="color{{$v}}" href="javascript:void(0)"><span name="name"></span></a></li>
							@endforeach
						
							<div class="clear"> </div>
						</ul>

						<!-- 颜色获取选中框 -->
						<script type="text/javascript">
							$('.yanse').click(function(){
								// alert(1);
								$(this).find('span[name=name]').attr('style','border:4px solid #8C2830');
								$(this).find('span[name=name]').attr('id','1');
								$(this).siblings('li').find('span[name=name]').removeAttr('style');
								$(this).siblings('li').find('span[name=name]').removeAttr('id');
								
							})
						</script>
						
						<ul class="size">
							<h3>尺码</h3>
							@if($size)
							<?php
							$s = [0=>' ','35','36','37','38','39','40','41','42','43','44']
							?>
							@endif
							@foreach($size as $k=>$v)
							<li class="a"><a  href="javascript:void(0)">{{$s[$v]}}</a></li>
							@endforeach
						</ul>
						
						<!-- 尺寸获取选中框 -->
						<script type="text/javascript">
							$('.a').click(function(){
								// alert(1);
								$(this).find('a').attr('style','border:4px solid #8C2830');
								$(this).find('a').attr('id','1');
								$(this).siblings('li').find('a').removeAttr('style');
								$(this).siblings('li').find('a').removeAttr('id');
							})

						</script>
						
						<div class="quantity_box">
							<ul class="product-qty">
								<span>数量:</span>
								<button class="add">+</button>
								<input type="text" class="num" style="width:35px" value="1">
								<button class="minus">-</button>
							</ul>
						</div>
						
						<!-- 数量获取选中框 -->
						<script type="text/javascript">
							// 数量加
						$('.add').click(function(){
							// alert(1);
							if($('.num').val()<{{$goods[0]->cnt}}){
								$('.num').val(parseInt($('.num').val()) + 1);
							}else{
								return;
							}

						})
						
							
						// 数量减
						$('.minus').click(function(){
							if($('.num').val()<2){
								return;
							}else{
								$('.num').val(parseInt($('.num').val()) - 1);
							}
						})


						</script>
		
					<input class="goods_id" type="hidden" name="gid" value={{$goods[0]->gid}}>

					<div class="clearfix"> </div>
				<div class="single-but item_add">
					<input type="submit" value="添加购物车"/>
				</div>
			</div>
		</div>
		<div class="clearfix"></div>
	</div>
				<div class="widget-box">
          <div class="widget-title">
            <ul class="nav nav-tabs">
              <li class="active"><a data-toggle="tab" href="#tab1">商品详情</a></li>
              <li class=""><a data-toggle="tab" href="#tab2">评论</a></li>
              <li class=""><a data-toggle="tab" href="#tab3">服务详情</a></li>
            </ul>
          </div>
          <div class="widget-content tab-content">
            <div id="tab1" class="tab-pane active">

				{!! $goods[0]->gdesc !!}
				<script type="text/javascript">
				$('.active').find('img').attr('style','width:100%');

				// 设置头信息
				 $.ajaxSetup({
				        headers: {
				            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
				        }
				      });
				 // 绑定单击事件添加到购物车
				 $('.item_add').find('input').click(function(){
				 	// alert(1);
				 	var gid = $('.goods_id').html();
				 	var color = $('span[id=1]').parent().attr('class');
				 	var size = $('a[id=1]').html();
				 	var buycnt = $('.num').val();
				 	// alert(num);
				 	// 发送ajax请求
				 	$.post('/home/cart/insert',{gid:gid,color:color,size:size,buycnt:buycnt},function(data){
				 		if(data == 1){
				 			alert(添加购物车成功);
				 		}else{
				 			alert(添加购物车失败);
				 		}
				 	})
				 })

				 $('.collect').click(function(data){
				 	// alert(1);
				 	var gid = $('.goods_id').html(); 
				 })


				</script>
             </div>
            <div id="tab2" class="tab-pane"> 
				<table class="table table-hover">
				  <tr>
				  	<td>用户名</td>
				  	<td>商品</td>
				  	<td>评论</td>
				  </tr>
				  <tr>
				  	<td>{{$user[0]->username}}</td>
				  	<td>{{$goods[0]->gname}}</td>
				  	<td>{{$comment[0]->comment}}</td>
				  </tr>
				</table>            
			</div>
            <div id="tab3" class="tab-pane">
             <img width="100%" src="/HomeCss/images/ffxq.jpg" />
              </div>
          </div>
        </div>
				</div>
					<h3>商品推荐</h3>

				@foreach($good as $k=>$v)
				@if($k<3)
				<div class="col-md-3 single-right">
					<div class="p-one simpleCart_shelfItem">
						<a href="http://shoes.cn:81/home/goods/details?gid={{$v->gid}}">
								<img width="140%" src="{{$v->gpic}}" />
								<div class="mask mask1">
									<span>查看详情</span>
								</div>
							</a>
						<h4>{{$v->gname}}</h4>
						<p><a class="item_add" href="#"><i></i> <span class=" item_price">￥{{$v->price}}</span></a></p>
					</div>
				</div>
				@endif
				@endforeach	

				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!--end-single-->
	<!--start-footer-->
	<div class="footer">
		<div class="container">
			<div class="footer-top">
				<div class="col-md-3 footer-left">
					<h3>ABOUT US</h3>
					<ul>
						<li><a href="#">Who We Are</a></li>
						<li><a href="contact.html">Contact Us</a></li>
						<li><a href="#">Our Sites</a></li>
						<li><a href="#">In The News</a></li>
						<li><a href="#">Team</a></li>
						<li><a href="#">Carrers</a></li>					 
					</ul>
				</div>
				<div class="col-md-3 footer-left">
					<h3>YOUR ACCOUNT</h3>
					<ul>
						<li><a href="account.html">Your Account</a></li>
						<li><a href="#">Personal Information</a></li>
						<li><a href="contact.html">Addresses</a></li>
						<li><a href="#">Discount</a></li>
						<li><a href="#">Track your order</a></li>					 					 
					</ul>
				</div>
				<div class="col-md-3 footer-left">
					<h3>CUSTOMER SERVICES</h3>
					<ul>
						<li><a href="#">FAQ</a></li>
						<li><a href="#">Shipping</a></li>
						<li><a href="#">Cancellation</a></li>
						<li><a href="#">Returns</a></li>
						<li><a href="#">Bulk Orders</a></li>
						<li><a href="#">Buying Guides</a></li>					 
					</ul>
				</div>
				<div class="col-md-3 footer-left">
					<h3>CATEGORIES</h3>
					<ul>
						<li><a href="#">Sports Shoes</a></li>
						<li><a href="#">Casual Shoes</a></li>
						<li><a href="#">Formal Shoes</a></li>
						<li><a href="#">Party Shoes</a></li>
						<li><a href="#">Ethnic</a></li>				 
					</ul>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!--end-footer-->
	<!--end-footer-text-->
	<div class="footer-text">
		<div class="container">
			<div class="footer-main">
				<p class="footer-class">Copyright &copy; 2015.Company name All rights reserved.More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
			</div>
		</div>
		<script type="text/javascript">
									$(document).ready(function() {
										/*
										var defaults = {
								  			containerID: 'toTop', // fading element id
											containerHoverID: 'toTopHover', // fading element hover id
											scrollSpeed: 1200,
											easingType: 'linear' 
								 		};
										*/
										
										$().UItoTop({ easingType: 'easeOutQuart' });
										
									});
								</script>
		<a href="#home" id="toTop" class="scroll" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
	</div>
	<!--end-footer-text-->	
	

	<script type="text/javascript" src="{{asset('/admincss/js/bootstrap.min.js')}}"></script> 
@endsection